<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import gameService from '../services/gameService'
import type { SoupCreate } from '../types'

const router = useRouter()
const form = ref<SoupCreate>({
  title: '',
  description: '',
  story: '',
  answers: [],
  difficulty: 'medium',
  category: 'mystery'
})

const newAnswer = ref('')
const loading = ref(false)
const error = ref('')
const success = ref('')
const validationErrors = ref<Record<string, string>>({})

// 添加答案
const addAnswer = () => {
  if (newAnswer.value.trim() && form.value.answers.length < 10) {
    form.value.answers.push(newAnswer.value.trim())
    newAnswer.value = ''
  }
}

// 移除答案
const removeAnswer = (index: number) => {
  form.value.answers.splice(index, 1)
}

// 验证表单
const validateForm = (): boolean => {
  validationErrors.value = {}
  let isValid = true

  if (!form.value.title.trim()) {
    validationErrors.value.title = '请输入标题'
    isValid = false
  } else if (form.value.title.length < 5 || form.value.title.length > 50) {
    validationErrors.value.title = '标题长度应在5-50个字符之间'
    isValid = false
  }

  if (!form.value.description.trim()) {
    validationErrors.value.description = '请输入描述'
    isValid = false
  } else if (form.value.description.length < 10 || form.value.description.length > 200) {
    validationErrors.value.description = '描述长度应在10-200个字符之间'
    isValid = false
  }

  if (!form.value.story.trim()) {
    validationErrors.value.story = '请输入完整故事'
    isValid = false
  } else if (form.value.story.length < 50 || form.value.story.length > 1000) {
    validationErrors.value.story = '故事长度应在50-1000个字符之间'
    isValid = false
  }

  if (form.value.answers.length === 0) {
    validationErrors.value.answers = '请至少添加一个答案'
    isValid = false
  }

  return isValid
}

// 提交表单
const submitForm = async () => {
  if (!validateForm()) {
    return
  }

  loading.value = true
  error.value = ''
  success.value = ''

  try {
    // 模拟创建海龟汤
    console.log('创建海龟汤:', form.value)
    
    // 模拟API调用
    // const result = await gameService.createSoup(form.value)
    
    // 重置表单
    form.value = {
      title: '',
      description: '',
      story: '',
      answers: [],
      difficulty: 'medium',
      category: 'mystery'
    }
    
    success.value = '海龟汤创建成功！'
    
    // 3秒后跳转到首页
    setTimeout(() => {
      router.push('/')
    }, 3000)
  } catch (err: any) {
    error.value = err.message || '创建失败，请重试'
  } finally {
    loading.value = false
  }
}

// 返回首页
const goBack = () => {
  router.push('/')
}
</script>

<template>
  <div class="create-game-page">
    <div class="create-game-container">
      <h1 class="page-title">创建海龟汤</h1>
      
      <!-- 成功提示 -->
      <div v-if="success" class="success-message">
        <i class="fas fa-check-circle"></i>
        <span>{{ success }}</span>
      </div>
      
      <!-- 错误提示 -->
      <div v-if="error" class="error-message">
        <i class="fas fa-exclamation-circle"></i>
        <span>{{ error }}</span>
      </div>
      
      <form @submit.prevent="submitForm" class="create-game-form">
        <!-- 标题 -->
        <div class="form-group">
          <label for="title">标题 <span class="required">*</span></label>
          <input
            id="title"
            v-model="form.title"
            type="text"
            placeholder="请输入海龟汤标题"
            maxlength="50"
            class="form-input"
          />
          <div v-if="validationErrors.title" class="validation-error">
            {{ validationErrors.title }}
          </div>
          <div class="char-count">{{ form.title.length }}/50</div>
        </div>
        
        <!-- 描述 -->
        <div class="form-group">
          <label for="description">描述 <span class="required">*</span></label>
          <textarea
            id="description"
            v-model="form.description"
            placeholder="请输入简短描述，吸引其他玩家"
            rows="3"
            maxlength="200"
            class="form-textarea"
          ></textarea>
          <div v-if="validationErrors.description" class="validation-error">
            {{ validationErrors.description }}
          </div>
          <div class="char-count">{{ form.description.length }}/200</div>
        </div>
        
        <!-- 完整故事 -->
        <div class="form-group">
          <label for="story">完整故事 <span class="required">*</span></label>
          <textarea
            id="story"
            v-model="form.story"
            placeholder="请输入完整的海龟汤故事，包括背景、情节和关键线索"
            rows="6"
            maxlength="1000"
            class="form-textarea"
          ></textarea>
          <div v-if="validationErrors.story" class="validation-error">
            {{ validationErrors.story }}
          </div>
          <div class="char-count">{{ form.story.length }}/1000</div>
        </div>
        
        <!-- 答案列表 -->
        <div class="form-group">
          <label>答案列表 <span class="required">*</span> <small>(至少1个，最多10个)</small></label>
          <div v-if="validationErrors.answers" class="validation-error">
            {{ validationErrors.answers }}
          </div>
          
          <div class="answers-container">
            <div
              v-for="(answer, index) in form.answers"
              :key="index"
              class="answer-item"
            >
              <span class="answer-number">{{ index + 1 }}.</span>
              <span class="answer-text">{{ answer }}</span>
              <button
                type="button"
                @click="removeAnswer(index)"
                class="remove-answer-btn"
                aria-label="删除答案"
              >
                <i class="fas fa-times"></i>
              </button>
            </div>
            
            <!-- 添加新答案 -->
            <div v-if="form.answers.length < 10" class="add-answer">
              <input
                v-model="newAnswer"
                type="text"
                placeholder="输入答案"
                @keyup.enter="addAnswer"
                class="answer-input"
              />
              <button
                type="button"
                @click="addAnswer"
                class="add-answer-btn"
              >
                添加
              </button>
            </div>
          </div>
        </div>
        
        <!-- 难度和分类 -->
        <div class="form-row">
          <div class="form-group half">
            <label for="difficulty">难度</label>
            <select
              id="difficulty"
              v-model="form.difficulty"
              class="form-select"
            >
              <option value="easy">简单</option>
              <option value="medium">中等</option>
              <option value="hard">困难</option>
            </select>
          </div>
          
          <div class="form-group half">
            <label for="category">分类</label>
            <select
              id="category"
              v-model="form.category"
              class="form-select"
            >
              <option value="mystery">悬疑</option>
              <option value="horror">恐怖</option>
              <option value="fantasy">奇幻</option>
              <option value="science">科幻</option>
              <option value="comedy">喜剧</option>
              <option value="other">其他</option>
            </select>
          </div>
        </div>
        
        <!-- 提示信息 -->
        <div class="tips">
          <h3>创建提示：</h3>
          <ul>
            <li>标题应当简洁有趣，能够引起玩家的好奇心</li>
            <li>描述应该概括故事核心，但不要泄露关键情节</li>
            <li>完整故事应包含足够的线索，但不要过于明显</li>
            <li>答案应当全面覆盖故事的关键转折点和真相</li>
            <li>考虑游戏平衡性，不要设计过于简单或过于困难的内容</li>
          </ul>
        </div>
        
        <!-- 提交按钮 -->
        <div class="form-actions">
          <button
            type="button"
            @click="goBack"
            class="btn-secondary"
            :disabled="loading"
          >
            返回
          </button>
          <button
            type="submit"
            class="btn-primary"
            :disabled="loading"
          >
            <span v-if="loading">创建中...</span>
            <span v-else>创建海龟汤</span>
          </button>
        </div>
      </form>
    </div>
  </div>
</template>

<style scoped>
.create-game-page {
  min-height: calc(100vh - 120px);
  background-color: #f5f7fa;
  padding: 40px 0;
}

.create-game-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

.page-title {
  font-size: 32px;
  color: #262626;
  margin-bottom: 32px;
  text-align: center;
}

/* 消息提示 */
.success-message,
.error-message {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 24px;
  font-size: 16px;
}

.success-message {
  background-color: #f6ffed;
  color: #52c41a;
  border: 1px solid #b7eb8f;
}

.error-message {
  background-color: #fff2f0;
  color: #ff4d4f;
  border: 1px solid #ffccc7;
}

.success-message i,
.error-message i {
  font-size: 20px;
}

/* 表单样式 */
.create-game-form {
  background: white;
  border-radius: 8px;
  padding: 32px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.form-group {
  margin-bottom: 24px;
}

.form-group label {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 8px;
}

.required {
  color: #ff4d4f;
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  font-size: 16px;
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
  font-family: inherit;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.form-textarea {
  resize: vertical;
  min-height: 100px;
  line-height: 1.5;
}

.validation-error {
  color: #ff4d4f;
  font-size: 14px;
  margin-top: 6px;
}

.char-count {
  font-size: 12px;
  color: #999;
  text-align: right;
  margin-top: 4px;
}

/* 答案列表 */
.answers-container {
  margin-top: 8px;
}

.answer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background-color: #fafafa;
  border: 1px solid #f0f0f0;
  border-radius: 6px;
  margin-bottom: 8px;
  transition: background-color 0.3s;
}

.answer-item:hover {
  background-color: #f5f5f5;
}

.answer-number {
  font-weight: 600;
  color: #1890ff;
  min-width: 20px;
}

.answer-text {
  flex: 1;
  color: #333;
}

.remove-answer-btn {
  width: 28px;
  height: 28px;
  border: none;
  background-color: #ff4d4f;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
  font-size: 16px;
}

.remove-answer-btn:hover {
  background-color: #ff7875;
}

/* 添加答案 */
.add-answer {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.answer-input {
  flex: 1;
  padding: 10px 12px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  font-size: 16px;
  outline: none;
  transition: border-color 0.3s;
}

.answer-input:focus {
  border-color: #1890ff;
}

.add-answer-btn {
  padding: 0 20px;
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s;
}

.add-answer-btn:hover {
  background-color: #40a9ff;
}

/* 表单行 */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

.form-group.half {
  margin-bottom: 0;
}

/* 提示信息 */
.tips {
  background-color: #f0f5ff;
  border: 1px solid #bae0ff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 32px;
}

.tips h3 {
  font-size: 16px;
  color: #1890ff;
  margin: 0 0 12px 0;
}

.tips ul {
  margin: 0;
  padding-left: 20px;
}

.tips li {
  color: #666;
  margin-bottom: 6px;
  line-height: 1.5;
}

.tips li:last-child {
  margin-bottom: 0;
}

/* 表单操作按钮 */
.form-actions {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
}

.btn-primary,
.btn-secondary {
  padding: 10px 24px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-primary {
  background-color: #1890ff;
  color: white;
  border: none;
}

.btn-primary:hover:not(:disabled) {
  background-color: #40a9ff;
}

.btn-primary:disabled {
  background-color: #d9d9d9;
  cursor: not-allowed;
}

.btn-secondary {
  background-color: white;
  color: #1890ff;
  border: 1px solid #1890ff;
}

.btn-secondary:hover {
  background-color: #e6f7ff;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .create-game-page {
    padding: 20px 0;
  }
  
  .create-game-container {
    padding: 0 16px;
  }
  
  .page-title {
    font-size: 24px;
    margin-bottom: 24px;
  }
  
  .create-game-form {
    padding: 20px;
  }
  
  .form-row {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .form-actions {
    flex-direction: column;
  }
  
  .btn-primary,
  .btn-secondary {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .success-message,
  .error-message {
    font-size: 14px;
    padding: 12px;
  }
  
  .form-group {
    margin-bottom: 20px;
  }
  
  .form-input,
  .form-textarea,
  .form-select {
    font-size: 14px;
  }
  
  .tips {
    padding: 16px;
  }
  
  .tips li {
    font-size: 14px;
  }
}
</style>